import React, { Component } from 'react';
import './Mylist.scss';
import one from '../imgs/001.gif';
import one2 from '../imgs/002.gif';
import one3 from '../imgs/003.gif';
import one4 from '../imgs/004.gif';
import one5 from '../imgs/005.gif';
import one6 from '../imgs/006.gif';
import one7 from '../imgs/007.gif';
import one8 from '../imgs/008.gif';
import one9 from '../imgs/009.gif';
import one10 from '../imgs/010.gif';

class Mylist extends Component {
    constructor(props){
        super(props);
        this.state = { //定义组件状态
            arr:[
                {name:'护肤',pic:one},
                {name:'彩妆',pic:one2},
                {name:'香氛',pic:one3},
                {name:'进口酒',pic:one4},
                {name:'国产酒',pic:one5},
                {name:'精品奢货',pic:one6},
                {name:'食品百货',pic:one7},
                {name:'母婴专区',pic:one8},
                {name:'直播专区',pic:one9},
                {name:'特卖专场',pic:one10},
            ]
        }
    }
    render() {
        return (
            <div className='list'>
                {
                    // 列表渲染, 使用js中的map函数
                    this.state.arr.map((item,index)=>{
                        return (
                            <div className="listbox" key={index}>
                                <img src={item.pic} alt="" />
                                <div className="name"> {item.name} </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Mylist;